<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>layui-theme-dark</title>
    <style>
      wc-include{
        padding: 15px;
        display: block;
      }

      #app {
        display: none;
      }

      .layui-layout-right .layui-nav-bar {
        background-color: unset !important;
      }

      .layui-layout-admin .layui-side {
        top: 0 !important;
        z-index: 1001;
      }

      .layui-layout-admin .layui-logo {
        position: relative !important;
        height: 60px !important;
        top: -2px !important;
      }

      .layui-side,
      .layui-header,
      .layui-body,
      .layui-footer {
        transition: left 0.3s;
      }

      .collapse .layui-layout-admin .layui-side,
      .collapse .layui-layout-admin .layui-header {
        left: -200px;
      }

      .collapse .layui-layout-admin .layui-footer,
      .collapse .layui-layout-admin .layui-body {
        left: 0px;
      }
    </style>
    <style>
      ::view-transition-old(root),
      ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
      }

      ::view-transition-old(root) {
        z-index: 9999;
      }

      ::view-transition-new(root) {
        z-index: 1;
      }

      .dark::view-transition-old(root) {
        z-index: 1;
      }

      .dark::view-transition-new(root) {
        z-index: 9999;
      }
    </style>
    <script type="module" src="./docs/lib/include.js"></script>
  </head>

  <body>
    <div class="layui-layout layui-layout-admin" id="app">
      <div class="layui-header">
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <!-- 移动端显示 -->
          <li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="menuLeft">
            <i class="layui-icon layui-icon-spread-left"></i>
          </li>
          <li class="layui-nav-item"><span id="layuiv" style="margin-left: 20px; font-size: 10px"></span></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <i id="change-theme" class="layui-icon layui-icon-theme" style="font-size: 20px"></i>
          </li>
          <li class="layui-nav-item" lay-unselect>
            <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" style="background-color: unset">
              <i class="layui-icon layui-icon-github" style="font-size: 20px"></i>
            </a>
          </li>
          <!-- 暂时移除 -->
          <!-- <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
            <a href="javascript:;" style="background-color: unset; padding-left: 0">
              <i class="layui-icon layui-icon-more-vertical"></i>
            </a>
          </li> -->
        </ul>
      </div>
      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域 -->
          <div class="layui-logo layui-bg-black">dark demo</div>
          <ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-unselect lay-filter="nav-side" id="ws-nav-side">
            <li class="layui-nav-item">
              <a class="" href="javascript:;">基本元素</a>
              <dl class="layui-nav-child">
                <dd><a data-path="view/button" href="javascript:;">按钮</a></dd>
                <dd><a data-path="view/element.nav" href="javascript:;">导航/面包屑</a></dd>
                <dd><a data-path="view/form" href="javascript:;">表单</a></dd>
                <dd><a data-path="view/menu" href="javascript:;">基础菜单</a></dd>
                <dd><a data-path="view/tabs" href="javascript:;">标签页</a></dd>
                <dd><a data-path="view/element.tab" href="javascript:;"><del>选项卡</del></a></dd>
                <dd><a data-path="view/progress" href="javascript:;">进度条</a></dd>
                <dd><a data-path="view/panel" href="javascript:;">面板</a></dd>
                <dd><a data-path="view/badge" href="javascript:;">徽章</a></dd>
                <dd><a data-path="view/timeline" href="javascript:;">时间线</a></dd>
                <dd><a data-path="view/table-static" href="javascript:;">静态表格</a></dd>
                <dd><a data-path="view/text.md" href="javascript:;">文本容器</a></dd>
                <dd><a data-path="view/auxiliar" href="javascript:;">辅助元素</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">组件示例</a>
              <dl class="layui-nav-child">
                <dd><a data-path="view/layer" href="javascript:;">弹出层</a></dd>
                <dd><a data-path="view/laydate" href="javascript:;">日期与时间选择</a></dd>
                <dd><a data-path="view/table" href="javascript:;">表格综合</a></dd>
                <dd><a data-path="view/table-test" href="javascript:;">表格操作</a></dd>
                <dd><a data-path="view/treeTable" href="javascript:;">树形表格</a></dd>
                <dd><a data-path="view/laypage" href="javascript:;">分页</a></dd>
                <dd><a data-path="view/upload" href="javascript:;">上传</a></dd>
                <dd><a data-path="view/dropdown" href="javascript:;">下拉菜单</a></dd>
                <dd><a data-path="view/transfer" href="javascript:;">穿梭框</a></dd>
                <dd><a data-path="view/tree" href="javascript:;">树形组件</a></dd>
                <dd><a data-path="view/colorpicker" href="javascript:;">颜色选择器</a></dd>
                <dd><a data-path="view/slider" href="javascript:;">滑块</a></dd>
                <dd><a data-path="view/rate" href="javascript:;">评分</a></dd>
                <dd><a data-path="view/carousel" href="javascript:;">轮播</a></dd>
                <dd><a data-path="view/flow" href="javascript:;">流加载</a></dd>
                <dd><a data-path="view/util" href="javascript:;">工具模块</a></dd>
                <dd><a data-path="view/code" href="javascript:;">文本行修饰</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">第三方模块</a>
              <dl class="layui-nav-child">
                <!-- <dd><a data-path="view/color-mode" href="javascript:;">colorMode 模块(WIP)</a></dd> -->
                <dd><a data-path="view/layui-soul-table" href="javascript:;">layui-soul-table</a></dd>
                <dd><a data-path="view/xm-select" href="javascript:;">xm-select</a></dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>

      <div class="layui-body">
        <!-- 内容主体区域 -->
        <wc-include id="router-view" allow-scripts></wc-include>
      </div>

      <!-- <div class="layui-footer">
      底部固定区域
    </div> -->
    </div>
    <script type="module" src="./app.js"></script>
  </body>
</html>
